<template>
  <div class="step-box">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <div class="form-box">
        <p class="sub-title">收款信息</p>
        <div class="form-item">
          <div class="form-flex-item">
            <el-form-item label="财务账务类型：" prop="accountType">
              <el-radio-group v-model="form.accountType" clearable>
                <el-radio :label="1">对公（开户账号为注册公司开户账号）</el-radio>
                <el-radio :label="0">对私（开户账号为个人银行账号）</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="银行卡号：" prop="bankNo">
              <el-input v-model="form.bankNo" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="开户行所在地：" prop="bankAddress">
              <el-cascader
                v-model="form.bankAddress"
                :options="areaList"
                clearable
              />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="开户行：" prop="bankName">
              <el-input v-model="form.bankName" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <div class="form-flex-item">
            <el-form-item label="开户行支行名称：" prop="subBankName">
              <el-input v-model="form.subBankName" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <template v-if="form.accountType === 0">
            <div class="form-flex-item">
              <el-form-item label="开户人身份证件：" prop="userCardImg">
                <UploadFile :file-list="form.userCardImg" @change="uploadHandle($event, 'userCardImg')">
                  <div slot="tip">
                    <p>请上传身份证正反面  <el-button class="upload-demo" type="text" @click="showDemoHandle('https://cy-smartcity.com:8100/assets/image6.01598bbc.png','示例图片')">查看示例</el-button></p>
                    <p>格式要求：JPG、JPEG、PNG，单张图片大小不超过10M</p>
                  </div>
                </UploadFile>
              </el-form-item>
            </div>
            <div class="form-flex-item">
              <el-form-item label="银行预留手机号：" prop="bankReservePhone">
                <el-input v-model="form.bankReservePhone" v-int placeholder="请输入" maxlength="11" clearable />
              </el-form-item>
            </div>
          </template>
          <template v-if="form.accountType === 1">
            <div class="form-flex-item">
              <el-form-item label="开户资质类型：" prop="openType">
                <el-select v-model="form.openType" clearable>
                  <el-option
                    v-for="item in principalType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="form-flex-item">
              <el-form-item label="开户名：" prop="userName">
                <el-input v-model="form.userName" placeholder="请输入" clearable />
              </el-form-item>
            </div>
          </template>

        </div>
      </div>
    </el-form>
    <PreviewImg :img-url="demoImg" :show-image.sync="showDemo" />
  </div>
</template>

<script>

import UploadFile from '@/components/UploadFile/index.vue'
import PreviewImg from '@/components/PreviewImg/index.vue'
import { mobileReg } from '@/utils/const'
import { AREA_LIST, PRINCIPAL_TYPE } from '@/utils/enum'

export default {
  name: 'Step3',
  components: {
    UploadFile,
    PreviewImg
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      demoImg: '',
      showDemo: false,
      areaList: AREA_LIST,
      principalType: PRINCIPAL_TYPE,
      form: {
        accountType: 1,
        bankNo: '',
        bankAddress: [],
        bankName: '',
        subBankName: '',
        userCardImg: '',
        bankReservePhone: '',
        openType: '',
        userName: ''
      },
      rules: {
        accountType: [
          { required: true, message: '请选择财务账务类型', trigger: ['blur'] }
        ],
        bankNo: [
          { required: true, message: '请输入银行卡号', trigger: ['blur'] }
        ],
        bankAddress: [
          { required: true, message: '请选择开户行所在地', trigger: ['change'] }
        ],
        bankName: [
          { required: true, message: '请输入开户行', trigger: ['blur'] }
        ],
        subBankName: [
          { required: true, message: '请输入开户行支行名称', trigger: ['blur'] }
        ],
        userCardImg: [
          { required: true, message: '请上传开户人身份证件', trigger: ['change'] }
        ],
        bankReservePhone: [
          { required: true, message: '请输入银行预留手机号', trigger: ['blur'] },
          { pattern: mobileReg, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        openType: [
          { required: true, message: '请选择开户资质类型', trigger: ['change'] }
        ],
        userName: [
          { required: true, message: '请输入开户名', trigger: ['blur'] }
        ]
      }
    }
  },

  created() {
    if (this.id) {
      this.form = this.formDetail
    }
  },

  methods: {

    // 展示示例
    showDemoHandle(imgUrl) {
      this.demoImg = imgUrl
      this.showDemo = true
    },

    // 上传图片处理
    uploadHandle(payload, name) {
      this.form[name] = payload.fileList[0]?.url
      this.$refs.form.validateField(name)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/components/Approve/step.scss';
</style>
